// initEarth.vue
<template>
    <div class="content">
        <div class="earth" id="earth"></div>
        <div class="ribbon">
            <div class="flex js-left mb10">
                <el-button class="mb10" type="primary" size="small" @click="addTerrain">加载地形</el-button>
                <el-button class="mb10" type="primary" size="small" @click="overstated">地形夸张</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import * as cesium from "cesium";
import { onMounted } from "vue";
import { useCesium } from "../hooks/useCesium";
let viewer = null
// 加载地形
const addTerrain = async () => {
    try {
        const terrain = await cesium.createWorldTerrainAsync({
            requestWaterMask: true,// 请求水体效果所需要的海岸线数据
            requestVertexNormals: true// 请求地形照明数据
        })
        viewer.terrainProvider = terrain
    } catch (err) {
        console.log(err);
    }
}
// 地形夸张
const overstated = () => {
    // 相机飞行到具体地点
    viewer.camera.flyTo({
        destination: cesium.Cartesian3.fromDegrees(116.39, 39.91, 2000),
        orientation: {
            pitch: cesium.Math.toRadians(-30)
        },
        complete: () => {
            // 确保相机高度计算包含夸张参数
            viewer.scene.camera.undergroundMode = true; // 启用地下模式（可选）
        }
    });
    // 以前地形夸张的操作
    // viewer.scene.globe.terrainExaggeration = 4
    // 现在垂直地形夸张的操作，默认值0
    viewer.scene.verticalExaggeration = 4
    // 垂直地形夸张相对高度，默认值0
    viewer.scene.verticalExaggerationRelativeHeight = 0.1
}
onMounted(() => {
    const earth = document.querySelector("#earth");
    viewer = useCesium(earth);
    // 开启地形深度检测
    viewer.scene.globe.depthTestAgainstTerrain = true;
});
</script>


<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    position: relative;

    .earth {
        width: 100%;
        height: 100%;
    }

    .ribbon {
        width: 200px;
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 99;
    }
}
</style>
